<template>
    <div class="seeHouse-view">
            <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
                <el-tab-pane label="楼盘信息" name="first">
                    <div class="seeHouse-view-content">
                        <div class="seeHouse-view-content-list">
                            <div class="seeHouse-view-content-list-item">
                                <div class="seeHouse-view-content-list-title">分类：</div>
                                <div class="seeHouse-view-content-list-msg">新房</div>
                            </div>
                            <div class="seeHouse-view-content-list-item">
                                <div class="seeHouse-view-content-list-title">项目名称：</div>
                                <div class="seeHouse-view-content-list-msg">{{linkerMsg.objectName}}</div>
                            </div>
                        </div>
                        <div class="seeHouse-view-content-list">
                            <div class="seeHouse-view-content-list-item">
                                <div class="seeHouse-view-content-list-title">均价：</div>
                                <div class="seeHouse-view-content-list-msg">{{fyInfoMsg.averagePrice}}{{fyInfoMsg.priceUnit}}</div>
                            </div>
                            <div class="seeHouse-view-content-list-item">
                                <div class="seeHouse-view-content-list-title">楼盘别名：</div>
                                <div class="seeHouse-view-content-list-msg">{{linkerMsg.alias}}</div>
                            </div>
                        </div>
                        <div class="seeHouse-view-content-list">
                            <div class="seeHouse-view-content-list-item1">
                                <div class="seeHouse-view-content-list-title">项目简介：</div>
                                <div class="seeHouse-view-content-list-msg">{{linkerMsg.objectSynopsis}}</div>
                            </div>
                        </div>
                        <div class="seeHouse-view-content-list">
                            <div class="seeHouse-view-content-list-item">
                                <div class="seeHouse-view-content-list-title">所在地址：</div>
                                <div class="seeHouse-view-content-list-msg">{{linkerMsg.address}}</div>
                            </div>
                            <div class="seeHouse-view-content-list-item">
                            <div class="seeHouse-view-content-list-title">销售状态：</div>
                            <div class="seeHouse-view-content-list-msg">{{linkerMsg.saleStatus}}</div>
                            </div>
                        </div>
                        <!--<div class="seeHouse-view-content-list">-->
                            <!--<div class="seeHouse-view-content-list-item">-->
                                <!--<div class="seeHouse-view-content-list-title">状态：</div>-->
                                <!--<div class="seeHouse-view-content-list-msg">{{linkerMsg.address}}</div>-->
                            <!--</div>-->
                            <!--<div class="seeHouse-view-content-list-item">-->
                                <!--<div class="seeHouse-view-content-list-title">销售状态：</div>-->
                                <!--<div class="seeHouse-view-content-list-msg">{{linkerMsg.address}}</div>-->
                            <!--</div>-->
                        <!--</div>-->
                        <div class="seeHouse-view-content-list">
                            <div class="seeHouse-view-content-list-item">
                                <div class="seeHouse-view-content-list-title">折扣：</div>
                                <div class="seeHouse-view-content-list-msg">{{fyInfoMsg.sale}}</div>
                            </div>
                            <div class="seeHouse-view-content-list-item">
                                <div class="seeHouse-view-content-list-title">开盘时间：</div>
                                <div class="seeHouse-view-content-list-msg">{{fyInfoMsg.openTime}}</div>
                            </div>
                        </div>
                        <div class="seeHouse-view-content-list">
                            <div class="seeHouse-view-content-list-item">
                                <div class="seeHouse-view-content-list-title">预计交房：</div>
                                <div class="seeHouse-view-content-list-msg">{{fyInfoMsg.expectedOthers}}</div>
                            </div>
                            <div class="seeHouse-view-content-list-item">
                                <div class="seeHouse-view-content-list-title">装修状况：</div>
                                <div class="seeHouse-view-content-list-msg">{{fyInfoMsg.decorateStatus}}</div>
                            </div>
                        </div>
                        <div class="seeHouse-view-content-list">
                            <div class="seeHouse-view-content-list-item">
                                <div class="seeHouse-view-content-list-title">占地面积：</div>
                                <div class="seeHouse-view-content-list-msg">{{fyInfoMsg.coverArea}}m2</div>
                            </div>
                            <div class="seeHouse-view-content-list-item">
                                <div class="seeHouse-view-content-list-title">建筑面积：</div>
                                <div class="seeHouse-view-content-list-msg">{{fyInfoMsg.buildArea}}m2</div>
                            </div>
                        </div>
                        <div class="seeHouse-view-content-list">
                            <div class="seeHouse-view-content-list-item">
                                <div class="seeHouse-view-content-list-title">绿化率：</div>
                                <div class="seeHouse-view-content-list-msg">{{fyInfoMsg.greenRate}}%</div>
                            </div>
                            <div class="seeHouse-view-content-list-item">
                                <div class="seeHouse-view-content-list-title">规划户数：</div>
                                <div class="seeHouse-view-content-list-msg">{{fyInfoMsg.householdNum}}户</div>
                            </div>
                        </div>
                        <div class="seeHouse-view-content-list">
                            <div class="seeHouse-view-content-list-item">
                                <div class="seeHouse-view-content-list-title">产权：</div>
                                <div class="seeHouse-view-content-list-msg">{{fyInfoMsg.propertyYears}}年</div>
                            </div>
                            <div class="seeHouse-view-content-list-item">
                                <div class="seeHouse-view-content-list-title">容积率：</div>
                                <div class="seeHouse-view-content-list-msg">{{fyInfoMsg.plotRate}}</div>
                            </div>
                        </div>
                        <div class="seeHouse-view-content-list">
                            <div class="seeHouse-view-content-list-item">
                                <div class="seeHouse-view-content-list-title">建筑风格：</div>
                                <div class="seeHouse-view-content-list-msg">{{fyInfoMsg.architecturalStyle}}</div>
                            </div>
                            <div class="seeHouse-view-content-list-item">
                                <div class="seeHouse-view-content-list-title">规划车位：</div>
                                <div class="seeHouse-view-content-list-msg">{{fyInfoMsg.carNum}}个</div>
                            </div>
                        </div>
                        <div class="seeHouse-view-content-list">
                            <div class="seeHouse-view-content-list-item">
                                <div class="seeHouse-view-content-list-title">供水方式：</div>
                                <div class="seeHouse-view-content-list-msg">{{fyInfoMsg.waterType}}</div>
                            </div>
                            <div class="seeHouse-view-content-list-item">
                                <div class="seeHouse-view-content-list-title">供暖方式：</div>
                                <div class="seeHouse-view-content-list-msg">{{fyInfoMsg.heatingMethod}}</div>
                            </div>
                        </div>
                        <div class="seeHouse-view-content-list">
                            <div class="seeHouse-view-content-list-item">
                                <div class="seeHouse-view-content-list-title">开发商：</div>
                                <div class="seeHouse-view-content-list-msg">{{fyInfoMsg.electricType}}</div>
                            </div>
                            <div class="seeHouse-view-content-list-item">
                                <div class="seeHouse-view-content-list-title">供电方式：</div>
                                <div class="seeHouse-view-content-list-msg">{{fyInfoMsg.heatingMethod}}</div>
                            </div>
                        </div>
                        <div class="seeHouse-view-content-list">
                            <div class="seeHouse-view-content-list-item">
                                <div class="seeHouse-view-content-list-title">物业类型：</div>
                                <div class="seeHouse-view-content-list-msg">{{fyInfoMsg.houseUse}}</div>
                            </div>
                            <div class="seeHouse-view-content-list-item">
                                <div class="seeHouse-view-content-list-title">物业公司：</div>
                                <div class="seeHouse-view-content-list-msg">{{fyInfoMsg.management}}</div>
                            </div>
                        </div>
                        <div class="seeHouse-view-content-list">
                            <div class="seeHouse-view-content-list-item">
                                <div class="seeHouse-view-content-list-title">物业费：</div>
                                <div class="seeHouse-view-content-list-msg">{{fyInfoMsg.managementPrice}}元/㎡/月</div>
                            </div>
                            <div class="seeHouse-view-content-list-item">
                                <div class="seeHouse-view-content-list-title">项目标签：</div>
                                <div class="seeHouse-view-content-list-msg">{{fyInfoMsg.projectTag}}</div>
                            </div>
                        </div>
                        <div class="seeHouse-view-content-list">
                            <div class="seeHouse-view-content-list-item1">
                                <div class="seeHouse-view-content-list-title">售楼处地址：</div>
                                <div class="seeHouse-view-content-list-msg">{{fyInfoMsg.salesAddress}}</div>
                            </div>
                        </div>
                        <div class="seeHouse-view-content-list">
                            <div class="seeHouse-view-content-list-item1">
                                <div class="seeHouse-view-content-list-title">预售许可证：</div>
                            </div>
                        </div>
                        <div class="seeHouse-view-content-list" v-for="(item ,index) in houseInfo.linkerLicences">
                            <div class="seeHouse-view-content-list-item1">
                                <div class="seeHouse-view-content-list-imgBox">
                                    <div class="list-imgBox seeHouse-view-margin-left seeHouse-view-margin-left">
                                        <img :src="item.licenceImgUrl">
                                    </div>
                                    <div class="list-imgBox-list">
                                        <div class="list-imgBox-list-item">
                                            <div class="item-text">预售许可证：</div>
                                            <div>{{item.licence}}</div>
                                        </div>
                                        <div class="list-imgBox-list-item">
                                            <div class="item-text">发证时间：</div>
                                            <div>{{item.certificateTime}}</div>
                                        </div>
                                    </div>
                                    <div class="list-imgBox-list">
                                        <div class="list-imgBox-list-item">
                                            <div class="item-text">绑定楼栋：</div>
                                            <div>{{item.bindingBuilding}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="seeHouse-view-content-list">
                            <div class="seeHouse-view-content-list-item1">
                                <div class="seeHouse-view-content-list-title">楼栋信息：</div>
                            </div>
                        </div>
                        <div class="seeHouse-view-content-list" v-for="(item ,index) in houseInfo.fyBuildingInfos">
                            <div class="seeHouse-view-content-list-item1">
                                <div class="seeHouse-view-content-list-imgBox">
                                    <div class="list-imgBox seeHouse-view-margin-left">
                                        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2871881941,1877216803&fm=27&gp=0.jpg">
                                    </div>
                                    <div class="list-imgBox-list">
                                        <div class="list-imgBox-list-item">
                                            <div class="item-text">楼栋名称：</div>
                                            <div>{{item.buildingName}}</div>
                                        </div>
                                        <div class="list-imgBox-list-item">
                                            <div class="item-text">交房时间：</div>
                                            <div>{{item.bdDeliveryTime}}</div>
                                        </div>
                                    </div>
                                    <div class="list-imgBox-list">
                                        <div class="list-imgBox-list-item">
                                            <div class="item-text">开盘时间：</div>
                                            <div>{{item.bdOpenTime}}</div>
                                        </div>
                                        <div class="list-imgBox-list-item">
                                            <div class="item-text">单元数量：</div>
                                            <div>{{item.unitNum}}</div>
                                        </div>
                                    </div>
                                    <div class="list-imgBox-list">
                                        <div class="list-imgBox-list-item">
                                            <div class="item-text">楼层数：</div>
                                            <div>{{item.floorNum}}</div>
                                        </div>
                                        <div class="list-imgBox-list-item">
                                            <div class="item-text">规划户数：</div>
                                            <div>{{item.bdHouseholdNum}}</div>
                                        </div>
                                    </div>
                                    <div class="list-imgBox-list">
                                        <div class="list-imgBox-list-item">
                                            <div class="item-text">产权年限：</div>
                                            <div>{{item.bdPropertyYears}}</div>
                                        </div>
                                        <div class="list-imgBox-list-item">
                                            <div class="item-text">销售状态：</div>
                                            <div>{{item.bdSaleStatus}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="seeHouse-view-content-list">
                            <div class="seeHouse-view-content-list-item1">
                                <div class="seeHouse-view-content-list-title">户型信息：</div>
                            </div>
                        </div>
                        <div class="seeHouse-view-content-list" v-for="(item ,index) in houseInfo.fyAttachInfos">
                            <div class="seeHouse-view-content-list-item1">
                                <div class="seeHouse-view-content-list-imgBox">
                                    <div class="list-imgBox seeHouse-view-margin-left">
                                        <img :src="item.imgUrl">
                                    </div>
                                    <div class="list-imgBox">
                                        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2871881941,1877216803&fm=27&gp=0.jpg">
                                    </div>
                                    <div class="list-imgBox-list">
                                        <div class="list-imgBox-list-item">
                                            <div class="item-text">户型：</div>
                                            <div>{{item.fyInfoId}}</div>
                                        </div>
                                        <div class="list-imgBox-list-item">
                                            <div class="item-text">建筑面积：</div>
                                            <div>{{item.area}}</div>
                                        </div>
                                    </div>
                                    <div class="list-imgBox-list">
                                        <div class="list-imgBox-list-item">
                                            <div class="item-text">总价：</div>
                                            <div>{{item.price}}</div>
                                        </div>
                                        <div class="list-imgBox-list-item">
                                            <div class="item-text">销售状态：</div>
                                            <div>{{item.saleStatus}}</div>
                                        </div>
                                    </div>
                                    <div class="list-imgBox-list">
                                        <div class="list-imgBox-list-item">
                                            <div class="item-text">朝向：</div>
                                            <div>{{item.orientations}}</div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="楼盘相册" name="second">
                    <div class="seeHouse-view-content">
                        <div class="seeHouse-view-content-list">
                            <div class="seeHouse-view-content-list-item1">
                                <div class="seeHouse-view-content-list-title">楼盘海报图：</div>
                            </div>
                        </div>
                        <div class="seeHouse-view-content-list">
                            <div class="seeHouse-view-content-list-item1">
                                <div class="list-imgBox" v-for="item in posterList">
                                    <img :src="item">
                                </div>
                            </div>
                        </div>
                        <div class="seeHouse-view-content-list">
                            <div class="seeHouse-view-content-list-item1">
                                <div class="seeHouse-view-content-list-title">项目简介：</div>
                                <div class="seeHouse-view-content-list-msg">{{fyInfoMsg.posterDescribe?fyInfoMsg.posterDescribe:'暂无数据'}}</div>
                            </div>
                        </div>
                        <div class="seeHouse-view-content-list">
                            <div class="seeHouse-view-content-list-item1">
                                <div class="seeHouse-view-content-list-title">楼盘视频：</div>
                            </div>
                        </div>
                        <div class="seeHouse-view-content-list">
                            <div class="seeHouse-view-content-list-item1">
                                <div class="list-imgBox" v-for="item in fyVideoList">
                                    <img :src="item">
                                </div>
                            </div>
                        </div>
                        <div class="seeHouse-view-content-list">
                            <div class="seeHouse-view-content-list-item1">
                                <div class="seeHouse-view-content-list-title">楼盘相册：</div>
                            </div>
                        </div>
                        <div v-for="item in groupInfo.linkerSceneGroups">
                            <div class="seeHouse-view-content-list">
                                <div class="seeHouse-view-content-list-item1">
                                    <div class="seeHouse-view-content-list-title">{{item.name}}</div>
                                </div>
                            </div>
                            <div class="seeHouse-view-content-list">
                                <div class="seeHouse-view-content-list-item1">
                                    <div class="list-imgBox" v-for="items in item.sceneList">
                                        <img :src="items.thumbnailUrl">
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </el-tab-pane>
                <el-tab-pane label="开通价格" name="third">
                    <div class="seeHouse-view-content-tabol">
                        <UserList :headlist="headlist" :contentlist="list"></UserList>
                    </div>
                </el-tab-pane>
            </el-tabs>
        <div  class="seeHouse-user-button">
            <!--<div class="seeHouse-user-button-button1">编 辑</div>-->
            <!--<div class="seeHouse-user-button-button1">提交审核</div>-->
            <div class="seeHouse-user-button-button1" @click="colosAddHouse">返 回</div>
        </div>
    </div>
</template>

<script>
    import UserList from '../user/UserList';
    export default {
        name: "seeHouse",
        data() {
            return {
                organizationId: this.$store.getters.userData.userMsg.id,//组织id
                activeName2: 'first',
                linkerMsg:{},
                fyInfoMsg:{},
                posterList:[],
                fyVideoList:[],
                houseInfo:{},
                groupInfo:{},
                headlist:{
                    checkout:false,
                    operation:{
                        type:false,
                        fromurl:"seeHouse",
                    },
                    list:[
                        {
                            prop:"subscribeNum",
                            label:"类型",
                            width:"200",
                        },{
                            prop:"subscribeRemark",
                            label:"购买次数限制",
                            width:"250",
                        }
                        ,{
                            prop:"subscribeAmount",
                            label:"开通价格/元",
                            width:"280",
                        }

                    ]},
                list:[],
            };
        },
        props: {
            seeHouseId:{
                type:String,
                required:false,
            } ,
        },
        watch: {
            seeHouseId:{
                handler(newValue, oldValue) {
                    if (newValue) {
                        this.getHouseMsg();
                        this.getSceneGroup();
                        this.getHouseAmount();
                    }
                }
            }
        },
        components: {
            UserList,
        },
        mounted(){

        },
        methods: {
            //获取楼盘价格
            getHouseAmount(){
                let _this = this;
                let params={
                    linkerId:_this.seeHouseId,
                    distributorId:_this.organizationId
                }
                _this.Api.setting.distSeeNewHouseAmount(params).then((data)=>{
                    this.list = data.data
                })
            },
            //获取相册详情
            getSceneGroup(){
                let _this = this;
                let params={
                    id:_this.seeHouseId,
                }
                _this.Api.setting.distSeeLinkerSceneGroup(params).then((data)=>{
                    this.groupInfo = data.data
                    this.posterList=data.data.posterImgUrl?data.data.posterImgUrl.split(","):"",//海报
                    this.fyVideoList=data.data.fyVideo?data.data.fyVideo.split(","):""
                   console.log("1111111111111111111",data)
                })
            },
            //获取楼盘详情
            getHouseMsg(){
                let _this = this;
                let params={
                    id:_this.seeHouseId,
                }
                _this.Api.setting.distSeeNewHouse(params).then((data)=>{
                    this.houseInfo = data.data
                    this.linkerMsg=data.data.linkerObject
                    this.fyInfoMsg=data.data.fyInfo
                    console.log("00000000000000000000000000",data)
                })
            },
            colosAddHouse(){
                this.$emit("coloeHouseViewShow");
            },
            handleClick(tab, event) {
                console.log(tab, event);
            }
        }
    }
</script>
<style>
    .seeHouse-view .el-upload--picture-card{
        width: 78px;
        height: 78px;
        line-height: 81px;
    }
    .seeHouse-view  .el-radio+.el-radio{
        margin-left: 0px;
    }
    .seeHouse-view .el-tabs__item.is-active{
        background:rgba(26,110,255,1);
        font-size:14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(255,255,255,1);
    }
</style>
<style scoped rel="stylesheet/scss" lang="scss">
    .seeHouse-view{
        margin: 24px;
        background-color: #ffffff;
        padding: 24px 32px;
    .seeHouse-view-content{
        padding: 24px 32px;
        .seeHouse-view-content-list{
            display: flex;
            justify-content: space-between;
            width: 1072px;
            .seeHouse-view-content-list-item{
                display: flex;
                width: 50%;
                margin-bottom: 24px;
                .seeHouse-view-content-list-title{
                    font-size:14px;
                    font-family:PingFangSC-Regular;
                    font-weight:400;
                    color:rgba(0,0,0,0.85);
                    line-height:22px;
                    align-self: center;
                    min-width: 85px;
                    text-align: center;
                }
                .seeHouse-view-content-list-msg{
                    font-size:14px;
                    font-family:PingFangSC-Regular;
                    font-weight:400;
                    color:rgba(0,0,0,0.65);
                    line-height:22px;
                    align-self: center;
                    margin-left: 8px;
                }
            }
            .seeHouse-view-content-list-item1{
                display: flex;
                width: 100%;
                margin-bottom: 24px;
                .seeHouse-view-content-list-title{
                    font-size:14px;
                    font-family:PingFangSC-Regular;
                    font-weight:400;
                    color:rgba(0,0,0,0.85);
                    line-height:22px;
                    align-self: center;
                    min-width: 85px;
                    text-align: center;
                }
                .seeHouse-view-content-list-msg{
                    font-size:14px;
                    font-family:PingFangSC-Regular;
                    font-weight:400;
                    color:rgba(0,0,0,0.65);
                    line-height:22px;
                    align-self: center;
                    margin-left: 8px;
                }
            }
            .list-imgBox{
                width: 100px;
                height: 75px;
                border-radius:8px;
                border:1px #D9D9D9 solid;
                overflow: hidden;
                align-self: center;
                margin-right: 24px;
                img{
                    width: 100px;
                    height: 75px;
                }
            }
            .seeHouse-view-content-list-imgBox{
                width:1072px;
                height:107px;
                background:rgba(255,255,255,1);
                border-radius:8px;
                border:1px #D9D9D9 solid;
                display: flex;

                .list-imgBox-list{
                    margin-top: 23px;
                    .list-imgBox-list-item{
                        display: flex;
                        min-width: 225px;
                        color: rgba(0, 0, 0, 0.65);
                        margin-bottom: 16px;
                        .item-text{
                            font-size: 14px;
                            font-family: PingFangSC-Regular;
                            font-weight: 400;
                            color: rgba(0, 0, 0, 0.85);
                            line-height: 22px;
                            min-width: 85px;
                            text-align: center;
                        }
                    }
                }
            }
        }
       }
        .seeHouse-user-button{
            display: flex;
            width:1072px;
            margin-bottom: 20px;
            margin-left: 30px;
            .seeHouse-user-button-button1{
                height:32px;
                background:rgba(16,165,22,1);
                border-radius:4px;
                line-height: 32px;
                padding: 0px 16px;
                font-size:14px;
                font-family:PingFangSC-Regular;
                font-weight:400;
                color:rgba(255,255,255,1);
                margin-right: 8px;
            }
            .seeHouse-user-button-button2{
                height:32px;
                background:rgba(255,255,255,1);
                border-radius:4px;
                border:1px #D9D9D9 solid;
                line-height: 32px;
                padding: 0px 16px;
                font-size:14px;
                font-family:PingFangSC-Regular;
                font-weight:400;
                color:rgba(0,0,0,0.65);
                margin-right: 8px;
            }
        }
        .seeHouse-view-content-tabol{
            margin-top: 24px;
            margin-bottom: 32px;
            width: 732px;
        }
    }
    .seeHouse-view-margin-left{
        margin-left: 24px;
    }
</style>